<template>
	<view class="main-content-area">
		<view class="u-flex u-padding-top-20 u-padding-left-40 u-padding-right-20 u-padding-bottom-35">
			<view class="u-flex-col u-flex-1">
				<text class="u-font-60 din-font bold">预估额度</text>
				<text class="nr u-color-353A5F u-margin-top-15">专业预估您的信贷额度</text>
			</view>
			<image src="https://resource.lanbaozixun.com/uploads/images/20250211205309558383693.png"
				class="page-icon u-padding-right-20" mode="widthFix"></image>
		</view>

		<view class="u-margin-20  u-padding-left-40 u-padding-right-40 bg-white information-area-one u-padding-20">
			<u-form :model="form" ref="uForm" :label-width="140" :label-style="{color:'#838383'}" :error-type="['toast']">
				<u-form-item required label="用户姓名">
					<u-input v-model="form.name" input-align="right" placeholder="请输入用户姓名" />
				</u-form-item>
				<u-form-item required label="证件号码">
					<u-input v-model="form.idcode" input-align="right" placeholder="请输入证件号码" />
				</u-form-item>
				<u-form-item required :border-bottom="false" label="电话号码">
					<u-input v-model="form.phone" input-align="right" placeholder="请输入电话号码" />
				</u-form-item>
			</u-form>
		</view>

		<view class="u-margin-20 u-padding-left-40 u-padding-right-40 bg-white information-area-tow u-padding-30">
			<view class="u-flex border-bottom u-padding-top-18 u-padding-bottom-18">
				<text class="lg u-color-161616">个人信息</text>
				<text class="xs u-color-8E94A6 u-padding-left-10">上传图片前请仔细核对您提交的信息</text>
			</view>
			<view class="upload-area u-flex u-margin-top-30">
				<view class="upload-item u-flex-1 u-margin-right-10">
					<uploader @after-read="afterRead($event,'id_code_head')" useSlot :max-upload="1">
						<image
							:src="form.id_code_head?id_code_head_url:'https://resource.lanbaozixun.com/uploads/images/20250417090211c9bd93767.png'"
							mode="scaleToFill" class="bg"></image>
						<image v-if="!form.id_code_head"
							src="https://resource.lanbaozixun.com/uploads/images/20250417090211bf8750025.png"
							mode="widthFix" class="icon"></image>
					</uploader>
					<u-icon v-if="form.id_code_head" @tap.self="deleteImage('id_code_head')" class="close-btn"
						name="trash-fill" color="#FF4443" size="32"></u-icon>
					<view class="u-flex u-row-center hint-area">
						<text class="u-color-FF4141">*</text>
						<text class="nr">上传身份证正面</text>
					</view>
				</view>
				<view class="upload-item u-flex-1 u-margin-left-10">
					<uploader @after-read="afterRead($event,'id_code_back_side')" useSlot :max-upload="1">
						<image
							:src="form.id_code_back_side?id_code_back_side_url:'https://resource.lanbaozixun.com/uploads/images/20250417090211433c99020.png'"
							mode="scaleToFill" class="bg"></image>
						<image v-if="!form.id_code_back_side"
							src="https://resource.lanbaozixun.com/uploads/images/20250417090211bf8750025.png"
							mode="widthFix" class="icon"></image>
					</uploader>
					<u-icon v-if="form.id_code_back_side" @tap.self="deleteImage('id_code_back_side')" class="close-btn"
						name="trash-fill" color="#FF4443" size="32"></u-icon>
					<view class="u-flex u-row-center hint-area">
						<text class="u-color-FF4141">*</text>
						<text class="nr">上传身份证反面</text>
					</view>
				</view>
			</view>
		</view>

		<view class="u-margin-20 u-padding-left-40 u-padding-right-40 bg-white information-area-tow u-padding-30">
			<view class="u-flex border-bottom u-padding-top-18 u-padding-bottom-18">
				<text class="lg u-color-161616">公司信息</text>
				<text class="xs u-color-8E94A6 u-padding-left-10">上传图片前请仔细核对您提交的信息</text>
			</view>
			<view class="upload-area u-flex u-margin-top-30">
				<view class="upload-item u-margin-right-10" style="width: calc(50% - 10rpx);">
					<uploader @after-read="afterRead($event,'business_license')" useSlot :max-upload="1">
						<image
							:src="form.business_license?business_license_url:'https://resource.lanbaozixun.com/uploads/images/2025041709021196ce25667.png'"
							mode="scaleToFill" class="bg"></image>
						<image v-if="!form.business_license"
							src="https://resource.lanbaozixun.com/uploads/images/20250417090211bf8750025.png"
							mode="widthFix" class="icon"></image>
					</uploader>
					<u-icon v-if="form.business_license" @tap.self="deleteImage('business_license')" class="close-btn"
						name="trash-fill" color="#FF4443" size="32"></u-icon>
					<view class="u-flex u-row-center hint-area">
						<text class="nr">上传营业执照</text>
					</view>
				</view>
			</view>
		</view>

		<view class="submit-btn lg" :class="{'disable':isDisable()}" @tap="$u.throttle(startEvaluating, 500)">
			开始预估
		</view>
	</view>
</template>

<script>
	import {
		uploadFile
	} from "@/utils/tools";
	export default {
		data() {
			return {
				form: {
					name: '',
					idcode: '',
					phone: '',
					id_code_head: '',
					id_code_back_side: '',
					business_license: ''
				},
				id_code_head_url: '',
				id_code_back_side_url: '',
				business_license_url: '',
			};
		},
		methods: {
			afterRead(e, a) {
				const file = e;
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();
						if (a == 'id_code_head') {
							this.form.id_code_head = res.base_url;
							this.id_code_head_url = res.url;
						}
						if (a == 'id_code_back_side') {
							this.form.id_code_back_side = res.base_url;
							this.id_code_back_side_url = res.url;
						}
						if (a == 'business_license') {
							this.form.business_license = res.base_url;
							this.business_license_url = res.url;
						}
					});
				})
			},
			deleteImage(e, event) {
				if (e == 'id_code_head') {
					this.form.id_code_head = '';
					this.id_code_head_url = '';
				}
				if (e == 'id_code_back_side') {
					this.form.id_code_back_side = '';
					this.id_code_back_side_url = '';
				}
				if (e == 'business_license') {
					this.form.business_license = '';
					this.business_license_url = '';
				}
			},
			isDisable() {
				let status = false;

				if (this.$u.test.isEmpty(this.form.name)) status = true;
				if (this.$u.test.isEmpty(this.form.idcode)) status = true;
				if (this.$u.test.isEmpty(this.form.phone)) status = true;
				if (this.$u.test.isEmpty(this.form.id_code_head)) status = true;
				if (this.$u.test.isEmpty(this.form.id_code_back_side)) status = true;

				return status;
			},
			startEvaluating() {
				if(this.$u.test.isEmpty(this.form.name))return this.$u.toast('请输入用户姓名');
				if(this.$u.test.isEmpty(this.form.idcode))return this.$u.toast('请输入身份号码');
				if(!this.$u.test.idCard(this.form.idcode))return this.$u.toast('请检查身份号码');
				if(this.$u.test.isEmpty(this.form.phone) )return this.$u.toast('请输入手机号');
				if(!this.$u.test.mobile(this.form.phone))return this.$u.toast('请检查手机号');
				if(this.$u.test.isEmpty(this.form.id_code_head) )return this.$u.toast('请上传身份证正面');
				if(this.$u.test.isEmpty(this.form.id_code_back_side) )return this.$u.toast('请上传身份证背面');
				uni.redirectTo({
					url:'/yixu/pages/loan/quota'
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.main-content-area{
		padding-top: 0;
		padding-bottom: 50rpx;
		background: linear-gradient(to bottom, #DFEAFD, #F4F5FA 40%);
		
		.page-icon {
			top: 20px;
			width: 307rpx;
			position: relative;
		}
	}
	page {
		
		
		.u-font-60{
			font-size: 60rpx;
		}

		.page-icon {
			width: 307rpx;
		}

		.information-area-one,
		.information-area-tow {
			z-index: 1;
			position: relative;
			border-radius: 20rpx;
		}

		.information-area-one {
			margin-top: -75rpx !important;
		}

		.border-bottom {
			border-bottom: 2rpx solid #ECECEC;
		}

		.upload-area {

			.upload-item {
				position: relative;
				border-radius: 10rpx;
				border: 2rpx solid #EDF1F8;

				.bg {
					margin: 25rpx 0;
					width: 70%;
					height: 140rpx;
				}

				.icon {
					top: calc(50% - 34rpx);
					left: calc(50% - 34rpx);
					position: absolute;
					width: 64rpx;
					height: 64rpx;
				}

				.close-btn {
					top: 16rpx;
					right: 36rpx;
					position: absolute;
				}

				.hint-area {
					padding: 10rpx 0;
					background: #DEE8F8;
				}
			}
		}

		.submit-btn {
			padding: 23rpx;
			color: #FFFFFF;
			text-align: center;
			background: #66a6ff;
			border-radius: 10rpx;
			margin: 60rpx 60rpx 0;

			&.disable {
				background: #87B7FF;
			}
		}
	}
</style>